<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>Examples</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <link href="" rel="stylesheet" />
</head>

<body>
  <div id="root">
    <input type="text" v-model="textValue">
    <textarea name="" id="" cols="30" rows="10" v-model="mulTextValue"></textarea>
    <div>
      <input type="checkbox" v-model="checkboxValue">{{checkboxValue}}
    </div>
    <div>
      <input type="checkbox" v-model="mulCheckboxValue" value="a">
      <input type="checkbox" v-model="mulCheckboxValue" value="b">
      <input type="checkbox" v-model="mulCheckboxValue" value="c">
      {{mulCheckboxValue}}
    </div>

    <div>
      <input type="radio" v-model="radioValue" value="a">
      <input type="radio" v-model="radioValue" value="b">
      <input type="radio" v-model="radioValue" value="c">
      {{radioValue}}
    </div>

    <div>
      <select name="" id="" v-model="selectValue">
        <!-- multiple 可以多行选择，但是它的data 值是一个数组 -->
        <!-- <select multiple v-model="selectValue"> -->

        <option value="0">北京</option>
        <!-- 也可以不写value，会自动侦测 -->
        <!-- <option>北京</option> -->
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
      </select>
      {{selectValue}}
    </div>
  </div>
  <script src="../vue.js"></script>
  <script>
    var vm = new Vue({
      el: "#root",
      data: {
        textValue: 'abc',
        mulTextValue: 'def',
        checkboxValue: true,
        mulCheckboxValue: [],
        radioValue: '',
        selectValue: '0'
      }
    })
    // 去掉run...提示
    Vue.config.productionTip = false
  </script>
</body>

</html>